<template>
  <div class="app_content_banner" id="app_content_banner">
    <div class="banner_clickable_area" @click="open_banner_link">

    </div>
    <div class="app_content_banner_background">
      <div class="app_content_banner_title">热门游戏</div>
      <div class="app_content_banner_title" id="app_content_banner_title_big" style="font-size: 60px;line-height:40px;position: relative;top: 257px ">游戏标题</div>
      <div class="app_content_banner_title" id="app_content_banner_title_small" style="font-size: 16px;line-height:20px;position: relative;top: 257px ">游戏副标题</div>
      <div class="app_content_banner_suoluetus">
        <div class="app_content_banner_suoluetu" id="app_content_banner_suoluetu_1" @click="me_change_banner_by_click(1)">
          <div class="app_content_banner_suoluetu_inside" id="app_content_banner_suoluetu_1_inside">

          </div>
        </div>
        <div class="app_content_banner_suoluetu" id="app_content_banner_suoluetu_2" @click="me_change_banner_by_click(2)">
          <div class="app_content_banner_suoluetu_inside" id="app_content_banner_suoluetu_2_inside">

          </div>
        </div>
        <div class="app_content_banner_suoluetu" id="app_content_banner_suoluetu_3" @click="me_change_banner_by_click(3)">
          <div class="app_content_banner_suoluetu_inside" id="app_content_banner_suoluetu_3_inside">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppBanner",

  methods:{
    me_change_banner_by_click:function (id){
      change_banner_by_click(id);
    },

    open_banner_link:function (){
      open_banner_link_f();
    }
  }
}

setInterval(auto_run_banner_changer,100);
var current_banner_id=0;
var banner_timer=0;
function auto_run_banner_changer(){
  if(banner_timer){
    banner_timer+=-1;
  }else{
    banner_manager(1);
    banner_timer=50;
  }
}
function banner_manager(op){
  if(op){
    current_banner_id+=1;
  }else{
    current_banner_id-=1;
  }
  if(current_banner_id==4){
    current_banner_id=1;
  }
  if(!current_banner_id){
    current_banner_id=3;
  }
  var app_content_banner_suoluetu_title=["2048","数独","开心消消乐"];
  var app_content_banner_suoluetu_ftitle=["《2048》是一款比较流行的数字游戏，最早于2014年3月20日发行。","数独是源自18世纪瑞士的一种数学游戏。是一种运用纸、笔进行演算的逻辑游戏。","《开心消消乐》是一款乐元素研发的一款三消类休闲游戏。"];
  document.getElementById("app_content_banner_suoluetu_1_inside").style.scale="105%";
  document.getElementById("app_content_banner_suoluetu_2_inside").style.scale="105%";
  document.getElementById("app_content_banner_suoluetu_3_inside").style.scale="105%";
  document.getElementById("app_content_banner_suoluetu_" + current_banner_id + "_inside").style.scale="100%";
  document.getElementById("app_content_banner").style.backgroundImage="url('/src/assets/banner/" + current_banner_id + ".jpg')";
  document.getElementById("app_content_banner_title_big").innerText=app_content_banner_suoluetu_title[current_banner_id-1];
  document.getElementById("app_content_banner_title_small").innerText=app_content_banner_suoluetu_ftitle[current_banner_id-1];
}
function change_banner_by_click(id){
  current_banner_id=id-1;
  banner_manager(1);
  banner_timer=50;
}
function open_banner_link_f(){
  switch (current_banner_id){
    case 1:
        window.open('gameIntroduction2048.html','_self');
      break;
    case 2:
      window.open('gameIntroductionShuDu.html','_self');
      break;
    case 3:
      window.open('gameIntroductionKXXXL.html','_self');
      break;
  }
}


</script>

<style scoped>

.banner_clickable_area:hover .app_content_banner_background{
  background-color: rgba(255, 255, 255, 0.1);
}

.banner_clickable_area{
  height: 675px;
  width: 880px;
  background-color: rgba(255, 255, 255, 0);
  position: absolute;
  z-index: 900;
}

.app_content_banner_suoluetu:hover{
  scale: 103%;
}

.app_content_banner_suoluetu:active{
  scale: 97%;
}

.app_content_banner_suoluetu_inside:hover{
  scale: 100%;
}

#app_content_banner_suoluetu_1_inside{
  background-image: url("../assets/banner/1.jpg");
}

#app_content_banner_suoluetu_2_inside{
  background-image: url("../assets/banner/2.jpg");
}

#app_content_banner_suoluetu_3_inside{
  background-image: url("../assets/banner/3.jpg");
}

.app_content_banner_suoluetu_inside{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: all 0.5s;
  width: 300px;
  height: 169px;
  scale: 105%;
}

#app_content_banner_suoluetu_1{

}

.app_content_banner_suoluetu{
  width: 300px;
  height: 169px;
  display: inline-block;
  /*border-radius: 15px;*/
  margin-bottom: 20px;
  backdrop-filter: blur(40px);
  transition: background 0.5s;
  box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.4);
  transition: scale 0.1s;

  overflow: hidden;

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.app_content_banner_suoluetu:hover{

}

.app_content_banner:hover .app_content_banner_background{
  background-color: rgba(255, 255, 255, 0.1);
}

.app_content_banner_suoluetus{
  padding-top: 21px;
  /*border-radius: 10px;*/
  width: 300px;
  height: 600px;
  position: relative;
  top: -143px;
  left: 880px;
}

.app_content_banner_background{
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 675px;
  /*border-radius: 15px;*/
  transition: all 0.5s;
  background-image: url("../assets/banner/bgci.png");
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}

.app_content_banner_title{
  height: 60px;
  line-height: 60px;
  font-size: 22px;
  text-indent: 15px;
  color: white;
  text-shadow: 0 0px 10px black;
}

.app_content_banner{
  width: 1200px;
  height: 675px;
  /*border-radius: 20px;*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: background 0.5s;
}
</style>